{% extends 'base.html' %}

{% block title %}
    登录 / 注册_电气信息学院请假管理系统
{% endblock title %}

{% block style %}
    <style>
        #backdrop-filter {
            background-color: #aaa3;
        }
        #welcome {
            text-align: center;
            font-size: 38px;
            background-color: #fffa;
            box-shadow: black 3px 3px 8px;
        }
    </style>
{% endblock style %}

{% block body %}
    <div class="container">
        <div class="row mt-3 mt-lg-5 mt-md-3 mt-sm-0 align-items-center" style="height: 80vh;">
            <div class="col">
                <div id="welcome" class="h1 p-5 rounded-4 w-75" style="letter-spacing: 8px;">请假审批管理系统</div>
            </div>
            <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 rounded" style="background-color: #ccccff; box-shadow: black 3px 5px 8px;">
                <div class="row bg-light rounded-top">
                    <div class="col p-0">
                        <button id="btnShowLogin" class="btn btn-light border-0 py-3 w-50 fs-5" style="border-radius: 5px 0 0 0;"><i class="fa fa-users me-2"></i>登录</button>
                        <button id="btnShowRegist" class="btn btn-light border-0 py-3 w-50 fs-5 float-end" style="border-radius: 0 5px 0 0;"><i class="fa fa-user-plus me-2"></i>注册</button>
                    </div>
                </div>
                <div id="formLogin" class="p-4">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="inputLoginRID" placeholder="id 号" required>
                        <label for="inputLoginRID">ID</label>
                        <div class="valid-feedback">验证成功！</div>
                        <div class="invalid-feedback">请输入 ID 号！</div>
                    </div>
                    <div class="form-floating mt-3">
                        <input type="password" class="form-control" id="inputLoginPass" placeholder="密码" required>
                        <label for="inputLoginPass">密码</label>
                        <div class="valid-feedback">验证成功！</div>
                        <div class="invalid-feedback">请输入密码！</div>
                    </div>
                    <button class="btn text-white w-100 mt-4" id="btnLogin" style="border: 1px solid #adadad;background-color: #00dd60;letter-spacing: 4px;">登录</button>
                </div>
                <div id="formRegist" class="p-4" style="display: none;">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="inputRegistRID" placeholder="id 号" required>
                        <label for="inputRegistRID">ID</label>
                        <div class="valid-feedback">验证成功！</div>
                        <div class="invalid-feedback">请输入 ID 号！</div>
                    </div>
                    <div class="form-floating mt-3">
                        <input type="text" class="form-control" id="inputRegistName" placeholder="姓名" required>
                        <label for="inputRegistName">姓名</label>
                        <div class="valid-feedback">验证成功！</div>
                        <div class="invalid-feedback">请输入姓名！</div>
                    </div>
                    <div class="form-floating mt-3">
                        <input type="password" class="form-control" id="inputRegistPass" placeholder="密码" required>
                        <label for="inputRegistPass">密码</label>
                        <div class="valid-feedback">验证成功！</div>
                        <div class="invalid-feedback">请输入密码！</div>
                    </div>
                    <button class="btn text-white w-100 mt-4" id="btnRegist" style="border: 1px solid #adadad;background-color: #00dd60;letter-spacing: 4px;">注册</button>
                </div>
            </div>
        </div>
    </div>
    
    <div id="carousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="2500">
                <img src="/static/img/img01.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item" data-bs-interval="2500">
                <img src="/static/img/img02.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item" data-bs-interval="2500">
                <img src="/static/img/img03.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item" data-bs-interval="2500">
                <img src="/static/img/img04.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item" data-bs-interval="2500">
                <img src="/static/img/img05.jpg" class="d-block w-100">
            </div>
        </div>
    </div>
{% endblock body %}
